import React, { Component } from 'react';

import styled from 'styled-components'

import border from '../../assets/thema/border'

import { themaColor } from '../../assets/thema/index'


import { NavLink } from 'react-router-dom'

const Footer = border({
    component: styled.div`
    width:100%;
    height:0.5rem
    ul{
        height:100%;
        display:flex;
        justify-content:space-around
        align-item:center
        li{
            a{
                height:100%;
                display:flex;
                width:100%;
                flex-direction:column
                justify-content:center;
                text-align:center
                &.active{
                    i{
                        color:${themaColor}
                    }
                    span{
                        color:${themaColor}
                    }
                }
                i{  
                    color:#ccc;
                    margin-bottom:.08rem
                }
                span{
                    color:#000;
                    font-size:.12rem
                }
            }
        }
    }
`,
    width: '1px 0 0 0 ',
    style: 'solid',
    color: '#ccc',
    radius: 0,
})

const Item = props => {
    return (
        <li>
            <NavLink
                to={props.path}
                activeClassName="active"
            >
                <i className={'fa fa-' + props.iconName}></i>
                <span>{props.info}</span>
            </NavLink>
        </li>
    )

}

class TabBar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            tabs: [
                {
                    id: 1,
                    info: "首页",
                    iconName: 'home',
                    path: '/home/homemain/today'
                },
                {
                    id: 3,
                    info: "拼团",
                    iconName: 'tasks',
                    path: '/category'
                },
                {
                    id: 4,
                    info: "购物车",
                    iconName: 'shopping-cart',
                    path: '/shopcar'
                },
                {
                    id: 5,
                    info: "我的",
                    iconName: 'user-circle-o',
                    path: '/mine'
                }
            ]
        }
    }

    renderItem = () => {
        return this.state.tabs.map(item => <Item key={item.id} {...item} />)
    }

    render() {
        return (
            <div>
                <Footer>
                    <ul>
                        {this.renderItem()}
                    </ul>
                </Footer>
            </div>
        )
    }
}

export default TabBar